<template>
  <view class="card tn-padding-sm tn-margin-sm">

    <peichangshouju-pdf style="position: absolute;top: -999999px" ref="PDF_img" :jsonData="jsonData" @upload="pdfUpload"></peichangshouju-pdf>
    <inputForm v-model="form" ref="form" :list="list" :sourceType="['album']">
    </inputForm>

    <view class="tn-flex tn-flex-row-center tn-padding-xl">
      <tn-button v-if="$route.query.isClosed === '0'" @click="submit" backgroundColor="tn-bg-blue" style="width: 80%" fontColor="tn-color-white">保存
      </tn-button>
    </view>

    <tn-modal v-model="erweima" :custom="true">
      <view class="custom-modal-content tn-flex tn-flex-direction-column tn-flex-col-center">
        <p style="margin-bottom: 8px;">赔偿收据</p>
        <canvas id="qrcode" canvas-id="qrcode" style="width: 200px; height: 200px;"></canvas>
        <tn-button @click="downloadPDFFn('赔偿收据')" backgroundColor="tn-bg-blue" style="width: 80%;margin-top: 16px;" fontColor="tn-color-white">
          下载
        </tn-button>
      </view>
    </tn-modal>
  </view>
</template>

<script>

import inputForm from "@/components/inputForm.vue";
import {
  deleteByDocIdPC,
  getDamageReceiptDetail,
  saveDamageReceipt,
  selectByDepartIdSimplification
} from "@/api/lupeiwenshu";
import dayjs from "dayjs";
import PeichangshoujuPdf from "@/pages/roadCompensation/peichangshouju/peichangshoujuPdf.vue";
import ShiguzhaopianPdf from "@/pages/roadCompensation/shiguzhaopian/shiguzhaopianPdf.vue";
import pdfMixins from "@/pages/roadCompensation/js/mixins";
import {toast} from "@/utils/common";
export default {
  components: {ShiguzhaopianPdf, PeichangshoujuPdf, inputForm},
  mixins:[pdfMixins],
  data() {
    return {
      form: {
        "caseInfo": "",
      },
      list: [
        {
          label: "拍照时间：",
          prop: "time",
          type: "datetime"
        },
        {
          label: "拍照人：",
          prop: "author",
          // type: "select",
          props: {
            label: "name",
            value: "name"
          },
          dicData: []
        },
        {
          label: "照片：",
          prop: "filePath",
          type: "uploadImg",
        },
        {
          label: "备注：",
          prop: "remark",
        },
      ]
    };
  },

  methods: {
    async initSelectJson() {
      this.list.find(item => item.label === '拍照人：').dicData = (await selectByDepartIdSimplification()).data;
    },
    submit() {
      const imgList = this.formatImg();
      let data = this.formatUpData(imgList)

      if (data.length) {
        saveDamageReceipt(data).then(res => {
          this.show = false
          toast(res.msg)
			setTimeout(() => {
			  uni.navigateBack();
			}, 1500)
        })
      } else {
        data = {
          docId: this.$route.query.id,
        }
        deleteByDocIdPC(data).then(res => {
          this.show = false
          toast(res.msg)
			setTimeout(() => {
			  uni.navigateBack();
			}, 1500)
        })
      }


    },
    getDetails() {
      getDamageReceiptDetail({
        docId: this.$route.query.id
      }).then(res => {
        if (res?.data.length) {
          const item = res.data[0]
          this.form = {
            time: item.takeTimeOne,
            locate: item.locateOne,
            direction: item.directionOne,
            author: item.authorOne,
            remark: item.remark,
          }

          this.setImgList(res.data)

          this.jsonData = res.data

        }else{
          this.form = {time:dayjs().format('YYYY-MM-DD HH:mm:ss'),...this.form}
        }
      })
    },
    formatUpData(imgList) {
      const list = []
      imgList.forEach((item, index) => {
        if (!(index % 2)) {
          list.push({
            docId: this.$route.query.id,
            orderNo: list.length + 1,

            authorOne: this.form.author,
            directionOne: this.form.direction,
            filePathOne: item,
            locateOne: this.form.locate,
            takeTimeOne: this.form.time,
            remark: this.form.remark,


            authorTwo: this.form.author,
            directionTwo: this.form.direction,
            filePathTwo: imgList[index + 1] || '../../img/upload.png',
            locateTwo: this.form.locate,
            takeTimeTwo: this.form.time,
          })
        }
      })
      return list;
    },
    setImgList(arr) {
      let list = [];
      arr.forEach(item => {
        if (item.filePathOne) {
          list.push({
            url: item.filePathOne,
            progress: 100,
            response: {
              data: {
                url: item.filePathOne
              }
            }
          })
        }
        if (item.filePathTwo && item.filePathTwo !== '../../img/upload.png') {
          list.push({
            url: item.filePathTwo,
            progress: 100,
            response: {
              data: {
                url: item.filePathTwo
              }
            }
          })
        }
      })
      this.$refs.form.$refs.filePath[0].lists = list;
    },
    formatImg() {
      let arr = [];
      this.$refs.form.$refs.filePath[0].lists.forEach((val) => {
        if (val.progress == 100) {
          arr.push(val.response.data.url);
        }
      });
      return arr;
    }
  },
  mounted() {
    this.initSelectJson();
    this.getDetails()
  },
};
</script>

<style lang="scss" scoped>
.card {
  background-color: #fff;
  box-shadow: 0px 4px 20px 0px rgba(0, 3, 72, 0.1);
  border-radius: 8px;
}
</style>
